<template>
<!--  组件结构-->
  <div class="app">
    <h1>{{msg}}亲爱的召唤师{{studentname}}</h1>
    <!--通过父组件个子组件传递函数配型的props实现：子给父传递数据    -->
    <School :showname="showname"/>
    <!--通过父组件个子组件绑定一个自定义事件实现：子给父传递数据 (第一种方式：使用 @或v-on)   -->
<!--    <Student @guigu="getstudentname" @demo="demo"/>-->
    <!--通过父组件个子组件绑定一个自定义事件实现：子给父传递数据（第二种方式：使用 ref）    -->
    <Student ref="student" @click.native="show"/>
  </div>
</template>

<script>
  //引入school组件
import Student from './components/Student';
import School from './components/School'
//组件交互相关代码（数据、方法等）
export default{
    name:'App',
    data()  {

       return {
         msg:'你好呀',
         studentname:''
       }
    },
    methods:{
        showname(value){
          alert(value)
        },
        getstudentname(value,...params){
          console.log("接收到参数",value,params)
          this.studentname=value
        },
        demo(){
          console.log("绑定第二个自定义事件")
        },
      show(){
          alert("12345")
      }

    },
   components:{
     Student,
     School
   },
  mounted() {

        this.$refs.student.$on('guigu',this.getstudentname)

        //第二种写法
        // this.$refs.student.$on('guigu',(value,...params)=>{
        //   console.log("接收到参数",value,params)
        //   this.studentname=value
        //   console.log(this )
        // })
        // this.$refs.student.$once('guigu',this.getstudentname)

  }

}

</script>
<style>
    .app{
      background-color: #de5f5f;
    }
</style>
